<template>
	<view class="mainbgc">
		<view class="flexleft" style="background-color: #ccc9c9;">
			<scroll-view scroll-y="true" class="scroll-Yleft margin_top1" style="margin-right: 10rpx;">
				<!-- <view class="itemli-boxf">
					<view class="itemli-contentf">推荐推荐</view>
				</view>
				<view class="itemli-box" v-for="item in 20">
					<view class="itemli-content">推荐推荐</view>
				</view> -->
				<view :class="item.id==leftlistid?'itemli-boxf':'itemli-box'" v-for="item in leftlist" :key="item.id" @click="changeleft(item)">
					<view class="textcenter" :class="item.id==leftlistid?'itemli-contentf':'itemli-content'">{{item.name}}</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="scroll-Yright margin_top1">
				<view :class="index==0?'':'margin_top1'" v-for="(item,index) in rightlist" :key="item.id">
					<view class="flexbetween" style="padding: 15rpx;background-color: #f8f8f8;"  @click="jumpsjlb(item.name,4,item.id)">
						<view class="titletext hei_text" style="font-size: 28rpx;">{{item.name}}</view>
						<view class="flexright">
							<view class="xiaohui margin_right1 main_size" style="font-size: 20rpx;">全部</view>
							<u-icon name="arrow-right" color="#999" size="12"></u-icon>
						</view>
					</view>
					<view class="flexleft flex_wrap ffffff" style="padding: 15rpx;" v-if="item.shopdata.length">
						<view class="flexcolumn itemfl margin_top" v-for="ite in item.shopdata" :key="ite.id" @click="jumpdetail('/pages_shouye/mendianxq?id=',ite.id)">
							<view class="flimg">
								<image :src="ite.logo_text" mode=""></image>
							</view>
							<view class="xiaohui main_size yhxk margin_top2" style="width: 150rpx;" >{{ite.name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				leftlist: [], //左侧列表
				rightlist: [], //右侧内容
				leftlistid: "", //左侧列表id
				lat:"",
				lng:"",
				cityid:"",
				areaid:""
			}
		},
		onLoad() {
			uni.$on("selectaddress",data=>{
				this.cityid = data.cityid
				this.citytext = data.citytext
				this.areatext = ""
				this.areaid = ""
				this.getfl()
			})
			uni.$on("selectareafn",data=>{
				this.areatext = data.areatext
				this.areaid = data.areaid
				this.getfl()
			})
			let storagecity = uni.getStorageSync("storagecity") || null
			let storagearea = uni.getStorageSync("storagearea") || null
			if(storagearea){
				this.areaid = storagearea.areaid
			}
			if(storagecity){
				this.citytext = storagecity.citytext
				this.lat = storagecity.latitude
				this.lng = storagecity.longitude
				this.cityid = storagecity.cityid
				this.getfl()
			}else{
				this.getlocation()
			}
		},
		onShareAppMessage: function(options) {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '喜嘟来商业联盟',
				imageUrl: '',
				path: '/pages/index/index?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		methods: {
			getlocation() {
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getcityInfo()
					},
					fail(err) {
						uni.hideLoading()
						console.log(err, 23432);
					}
				});
			},
			getcityInfo() {
				httpRequest.request('/api/index/getCurrCity', 'POST', {
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					uni.hideLoading()
					let data = {
						citytext:res.data.pinfo.name,
						latitude:this.lat,
						longitude:this.lng,
						cityid:res.data.pid,
					}
					// this.citytext = res.data.pinfo'.name
					// this.citydata.cityid = res.data.id'
					this.cityid = res.data.pid
					this.areaid = res.data.id
					let area = {
						areatext:res.data.name,
						areaid:res.data.id
					}
					uni.setStorageSync("storagecity", data)
					uni.setStorageSync("storagearea", area)
					this.getfl()
				})
			},
			jumpdetail(urls, id) {
				uni.navigateTo({
					url: urls + id
				})
			},
			changeleft(item) {
				this.leftlistid = item.id
				if (item.id != "") {
					this.getchildinit(item.id)
				} else {
					this.rightlist = []
				}
			},
			getfl() {
				httpRequest.request('/api/index/shopCategory', 'GET', {
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.leftlist = res.data
						this.leftlistid = res.data[0].id
						this.getchildinit(res.data[0].id)
					}
				})
			},
			getchildinit(category_id){
				uni.showLoading({
					mask:true,
					title:"请稍后"
				})
				httpRequest.request('/api/index/shopCategoryChild', 'GET', {
					category_id,
					lat:this.lat,
					lng:this.lng,
					city_id:this.cityid,
					area_id:this.areaid,
				}, false, false, true).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						this.rightlist = res.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ss {
		background-color: #f3f3f3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		padding: 10rpx 18rpx;
	}

	.search {
		width: 27rpx;
		height: 27rpx;
		margin-right: 30rpx;
	}

	.scroll-Yleft {
		height: calc(100vh - 15rpx);
		width: 190rpx;
	}

	.scroll-Yright {
		height: calc(100vh - 15rpx);
		width: calc(100vw - 200rpx);

	}

	.itemli-boxf {
		padding: 20rpx 15rpx;
		background-color: #e2e2e2;
	}

	.itemli-box {
		padding: 20rpx 15rpx;
		background-color: #fff;
	}

	.itemli-contentf {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		border-left: 4rpx solid #e41946;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		color: #333;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemli-content {
		padding: 0 15rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		// font-weight: 800;
		color: #9B9B9B;
		// width: 160rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
	}

	.itemfl {
		width: 33.33%;

	}



	.flimg {
		width: 140rpx;
		height: 140rpx;
		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.leftimg {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
		flex: 2;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.goodsnote {
		height: 80rpx;
	}

	.flexstartclom {
		flex: 3;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
		margin-top: 40rpx;
	}

	.lookall {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ff9341;
	}
</style>